<template>
  <el-row :gutter="20" class="header">
    <el-col :span="7">
      <!-- 搜索输入框 -->
      <el-input placeholder="请输入订单编号..." v-model="queryForm.query" clearable></el-input>
    </el-col>
  </el-row>
  <el-table :data="tableData" stripe style="width: 100%">
    <el-table-column
        type="index"
        :index="indexMethod+((queryForm.pageNum-1)*queryForm.pageSize)"
        label="序号"
        width="100"
        align="center"
    />
    <el-table-column align="center" prop="orderNumber" label="订单编号" width="250"></el-table-column>
    <el-table-column align="center" prop="totalPrice" label="订单总价" width="100"></el-table-column>
    <el-table-column align="center" prop="order_time" label="下单时间" width="250">
      <template #default="scope">
        {{ formatOrderTime(scope.row.order_time) }}
      </template>
    </el-table-column>
    <el-table-column align="center" prop="status2" label="订单状态" width="150">
      <template #default="scope">
        <el-tag type="danger" v-if="scope.row.status2 === 0" effect="dark">待付款</el-tag>
        <el-tag type="primary" v-if="scope.row.status2 === 1" effect="dark">待收货</el-tag>
        <el-tag type="primary" v-if="scope.row.status2 === 2" effect="dark">待评价</el-tag>
        <el-tag type="success" v-if="scope.row.status2 === 3" effect="dark">已完成</el-tag>
        <el-tag type="warning" v-if="scope.row.status2 === -1" effect="dark">已失效</el-tag>
      </template>
    </el-table-column>
    <el-table-column align="center" label="操作" width="200">
      <template #default="scope">
<!--        <el-button type="text" v-if="scope.row.status2 === 0" @click="handleNote(scope.row.userid)">提醒</el-button>-->
<!--        <el-button type="text" v-if="scope.row.status2 === 1" @click="handleAccept(scope.row.id)">受理</el-button>-->
        <el-button type="text" @click="handleView(scope.row.id)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
      v-model:currentPage="queryForm.pageNum"
      v-model:page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <el-dialog v-model="formVisible">
    <OrderDetail v-if="formVisible"  :orderId="orderId"></OrderDetail>
  </el-dialog>
</template>
<script setup>
import {ref, onMounted,watch} from "vue";
import requestUtil, {api} from "@/api/request.js";
import { debounce } from "lodash";
import {ElMessage} from "element-plus";
import OrderDetail from "@/views/goods/order/components/OrderDetail.vue";
let orderId = ref(0);
let tableData = ref([]);
let indexMethod = ref(1);
let total = ref(0);
let formVisible = ref(false);
const queryForm = ref({
  query: "",
  pageNum: 1,
  pageSize: 10
});
// 处理每页条数变化
const handleSizeChange = pageSize => {
  queryForm.value.pageNum = 1;
  queryForm.value.pageSize = pageSize;
  getOrderList();
};
// 处理当前页变化
const handleCurrentChange = pageNum => {
  queryForm.value.pageNum = pageNum;
  getOrderList();
};
const getOrderList = async () => {
  let res = await requestUtil.get(
      `management/getOrderList/` +
      `?query=${queryForm.value.query}` +
      `&pageNum=${queryForm.value.pageNum}` +
      `&pageSize=${queryForm.value.pageSize}`)
  if (res.data.code === 200) {
    tableData.value = mergeOrderData(res.data.orderList);
    total.value = res.data.total;
  }
};
onMounted(() => {
  getOrderList();
});

const handleView = (id)=>{
  orderId.value = id;
  formVisible.value = true;
}

// 使用防抖搜索函数
watch(
  () => queryForm.value.query,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      debouncedGetUserInfo();
    }
  }
);

// 创建一个防抖的搜索函数
const debouncedGetUserInfo = debounce(() => {
  getOrderList();
}, 300);
// 格式化下单时间
function formatOrderTime(orderTime) {
  const date = new Date(orderTime);
  return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.toLocaleTimeString()}`;
}

// 合并订单数据
const mergeOrderData = (data) => {
  const orderMap = new Map();

  data.forEach((item) => {
    if (!orderMap.has(item.orderNumber)) {
      // 如果订单号不存在于 Map 中，初始化
      orderMap.set(item.orderNumber, {...item, items: [item]});
    } else {
      // 如果订单号已存在，将当前记录添加到 items 中
      const existing = orderMap.get(item.orderNumber);
      existing.items.push(item);
    }
  });

  // 转换为数组返回
  return Array.from(orderMap.values());
};

</script>

<style>

</style>